@model dynamic

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <title>add</title>
    <script src="/lib/jquery/dist/jquery.min.js"></script>
    <script src="/miniui/miniui.js"></script>
    <link  href="/miniui/themes/default/miniui.css"   rel="stylesheet"/>
    <link href="/miniui/themes/icons.css"  rel="stylesheet"/>
    <script src="/js/form-serialize.js"></script>
    <script src ="/js/axios.js" ></script> <!--这里引入了axios.js-->
</head>
<style>
    .thumb-box {
        text-align: center;
        margin-top: 50px;
    }

    .thumb {
        width: 250px;
        height: 250px;
        object-fit: cover;
        border-radius: 50%;
    }
</style>
<body>
<div>
    
    
    <form id="form1">
        <input type="hidden" name="photoUrl" id="photoUrl" />
        <div style="padding-left:11px;padding-bottom:5px;">
            <table style="table-layout:fixed;">
                <tr>
                    <td style="width:90px;">用户姓名：</td>
                    <td style="width:150px;">
                        <input type ="text" name="UserName" placeholder="请输入姓名" autocomplete="off" />
                    </td>
                    <td style="width:90px;">用户密码</td>
                    <td>
                        <input type="password" name="UserPassword"  placeholder="请输入密码"/>
                    </td>
                </tr>
                <tr>
                    <td style="width:90px;">用户邮箱：</td>
                    <td>
                        <input type="text" name="UserEmail" placeholder="请输入邮箱" autocomplete ="off"/>
                    </td>
                    <td style="width:90px;">手机号码：</td>
                    <td>
                        <input type="text" name="UserPhone" placeholder="请输入手机号码" autocomplete ="off" />
                    </td>
                </tr>

                <tr>
                    <td style="width:90px;">性别：</td>
                    <td>
                        <select name="gender" class="mini-radiobuttonlist">
                            <option value="0">男</option>
                            <option value="1">女</option>
                        </select>
                    </td>
                    <td>头像：</td>
                    <td>
                        <input class="mini-htmlfile" name="PhotoUrl" type="file" style="display:none" id="iptFile" />
                    </td>
                </tr>
                <tr>
                    <td style="width:190px;">
                        <button class="btn btn-primary" id="btnChoose">选择 & 上传图片</button>
                    </td>
                    <td>
                        <div class="thumb-box">
                            <!-- 头像 -->
                            <img src="" class="img-thumbnail thumb" alt="">
                        </div>
                    </td>
                </tr>
            </table>
        </div>
        <div style="text-align:center;padding:10px;">
            <mini-button onclick="onOk" style="width:60px;margin-right:20px;">确定</mini-button>
            <mini-button onclick="onCancel" style="width:60px;">取消</mini-button>
        </div>
    </form>
    <script>
        const btnChoose = document.querySelector("#btnChoose");
        const iptFile = document.querySelector("#iptFile");
        const thumb = document.querySelector(".thumb");
        const form1 = document.querySelector("#form1");
        form1.addEventListener("submit",function(e){
            //  console.log("hello");
            e.preventDefault();
        })
        btnChoose.addEventListener("click",function(e){
            // e.preventDefault();
            iptFile.click();

        })
        iptFile.addEventListener("change",function(){
            if(!this.files[0]){
                return;
            }
            let formData = new FormData();
            formData.append("photo",this.files[0]);
            axios({
                method:"post",
                url:"/user/photoUpload",
                data:formData
            }).then(function({data:res}){
                if(res.code===200){
                    const photoUrl = document.querySelector("#photoUrl");
                    thumb.src ="/"+res.url;
                    photoUrl.value = res.url;
                }
            })
        })

        function onOk(){
            let data = serialize(form1);
            axios({
                method:"post",
                url:"/user/addUser",
                data
            }).then(function({data:res}){
                if(res.code===200){
                    alert(res.msg);
                    if (window.CloseOwnerWindow) return window.CloseOwnerWindow("");
                    else window.close();
                }
            })
        }

    </script>
</div>
</body>
</html>